<template>
    <div>
        <a-modal
            :visible="handleModalVisible"
            :title="form.id?'编辑':'添加'"
            :maskClosable="false"
            :closable="true"
            :destroyOnClose="true"
            width="80%"
            :dialog-style="{ margin: '0 auto'}"
            wrapClassName=""
            @cancel="closeVisible"
            >
            <template slot="footer" style="text-align:center;">
                <a-button @click="closeVisible">
                    取消
                </a-button>
                <a-button class="blue-btn" @click="onSubmit">
                    提交
                </a-button>
            </template>
            <a-form-model
                ref="ruleForm"
                :model="form"
                :rules="rules"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
                class="form-model-addAndEdit"
            >
                <a-form-model-item label="金额" prop="fje">
                    <a-input-number v-model="form.fje" :min="1" class="formModel-item-input"/>
                </a-form-model-item>
                <a-form-model-item label="来源" prop="fly">
                    <a-input v-model="form.fly" class="formModel-item-input"/>
                </a-form-model-item>
                <a-form-model-item label="说明" prop="fsm">
                    <a-input v-model="form.fsm" class="formModel-item-input"/>
                </a-form-model-item>
            </a-form-model>
        </a-modal>
    </div>
</template>
<script>
import compSelector from '@/components/compSelector/compSelector'
import {} from '@/components/compSearchCriteria/ContractType'
import { add,edit} from './service/index'
import moment from 'moment'
export default {
  props:{
    passObj:{
      type:[Array,Object],
      default: () => {},
      required:false
    },
  },
  components:{
    compSelector
  },
  data() {
    return {
      moment:moment,
      handleModalVisible: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        id: '',
        fje: null,
        fly: '',
        fsm: '',
      },
      kongForm: {},
      rules: {
        fje: [
          { required: true, message: '请输入金额', trigger: 'blur' },
        ],
        fly: [{ required: true, message: '请输入来源', trigger: 'blur' }],
        fsm: [{ required: true, message: '请输入说明', trigger: 'blur' }],
      }
    }
  },
  created() {
    this.kongForm = JSON.parse(JSON.stringify(this.form))
  },
  watch: {
    passObj(newval,oldVal){
      //console.log(newval)
      if(newval.id){
        this.form = newval
      }
    },
  },
  methods: {
    // 右上角关闭后的回调
    closeVisible(e){
      this.$emit('success')
      this.handleModalVisible = false
      this.form = {...this.kongForm}
    },
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
            let data = this.form
            if(this.form.id){
                edit(data).then(res => {
                    if(res.code == 200){
                        this.$message.success(res.message)
                        this.closeVisible()
                    } else {
                        this.$message.error(res.message)
                    }
                })
            } else {
                add(data).then(res => {
                    if(res.code == 200){
                        this.$message.success(res.message)
                        this.closeVisible()
                    } else {
                        this.$message.error(res.message)
                    }
                })
            }
        } else {
          //console.log('error submit!!');
          return false;
        }
      });
    },
  },
}
</script>
<style lang="less" scoped>
.form-model-addAndEdit{
    .ant-form-item {
        .ant-form-item-label{
            width: 180px !important;
        }
        .ant-form-item-control-wrapper{
            width: 180px !important;
            .ant-form-item-control {}
        }
    }
    .formModel-item-input {
        width: 100%;
    }
}
</style>
